@primaryColor: #fff;
@primaryBgColor: #1989fa;
@primaryBorderColor: #1989fa;

@defaultColor: #323233;
@defaultBgColor: #fff;
@defaultBorderColor: #ebedf0;

@plainColor: @primaryBgColor;
@plainBgColor: #fff;

.my-button {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	height: 88px;
	line-height: 1.2;
	margin: 0;
	padding: 0;
	font-size: 32px;
	text-align: center;
	border-radius: 4px;
	transition: opacity 0.2s;
	-webkit-appearance: none;

	&.large {
		width: 100%;
		height: 100px;
	}
	&.normal {
		padding: 0 30px;
		font-size: 28px;
	}
	&.small {
		height: 64px;
		padding: 0 16px;
		font-size: 12px;
	}
	&.min {
		font-size: 19px;
		padding: 0 8px;
		height: 24px;
	}

	&.primary {
		padding: 0 30px;
		color: @primaryColor;
		background-color: @primaryBgColor;
		border: 1px solid @primaryBorderColor;
	}
	&.default {
		padding: 0 30px;
		color: @defaultColor;
		background-color: @defaultBgColor;
		border: 1px solid @defaultBorderColor;
	}

	&.plain {
		background-color: @plainBgColor;
		&.primary {
			color: @plainColor;
		}
	}
	&.block {
		display: block;
		width: 100%;
	}

	&:active {
		&::before {
			opacity: 0.1;
		}
	}
	&::before {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
		background-color: #000;
		border: inherit;
		border-color: #000;
		border-radius: inherit;
		transform: translate(-50%, -50%);
		opacity: 0;
		content: '';
	}
	&-content {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
}
